<template>
  <view class="layout shop">
    <scroll-view scroll-x class="bg-white nav">
      <view class="flex text-center">
        <view
          class="cu-item flex-sub"
          :class="index == current ? 'text-green cur' : ''"
          v-for="(item, index) in datas"
          :key="index"
          @tap="tabSelect"
          :data-id="index"
          v-text="item.name"
        ></view>
      </view>
    </scroll-view>
    <swiper :indicator-dots="false" :current="current" @change="onChangeSwiper">
      <swiper-item v-for="(item, index) in datas" :key="index">
        <count-down @event-end="onWatchTimeEnd" v-if="item.id === 3" :time="item.time"></count-down>
        <scroll-view scroll-y="true" :class="{ calcTimeContent: item.time ? true : false }">
          <view class="grid col-2">
            <view class="grid-item" v-for="(good, k) in datas[current].list" :key="k">
              <shop-item
                @event-click="onClickExchange(good)"
                :title="good.name"
                :thumb="good.thumb ? good.thumb[0].url : ''"
                :scorePrice="good.scorePrice"
                :oriScorePrice="good.oriScorePrice"
                :cashPrice="good.cashPrice"
                :type="datas[current].id"
              ></shop-item>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
    <shop-modal :show.sync="showModal" :info="currentGoodInfo"></shop-modal>
  </view>
</template>

<script>
import shopItem from "@/components/shop/item";
import shopModal from "@/components/shop/modal";
import countDown from "@/components/time/countDown";
import baseMixins from "@/utils/mixins";
let size = 1000,
  timer = null;
export default {
  mixins: [baseMixins],
  components: {
    shopItem,
    shopModal,
    countDown
  },
  data() {
    return {
      datas: [],
      current: 0,
      time: 0,
      showModal: false,
      currentGoodInfo: {} // 当前商品信息
    };
  },
  onLoad() {
    uni.showLoading({
      title: "商品加载中..."
    });
    this.init().then(_ => {
      uni.hideLoading();
    });
  },
  watch: {
    current: {
      handler(n) {
        if (this.datas[n].list.length <= 0) {
          uni.showLoading({
            title: "商品加载中..."
          });
          this.$api.good.lists(1, size, this.datas[n].id).then(response => {
            this.datas[n].list = response.data.data.products;
            uni.hideLoading();
          });
        }
      }
    }
  },
  methods: {
    onWatchTimeEnd(){
      this.datas.page =1;
      this.datas.list = [];
      this.$api.good.lists(1, size, 3).then(_ => {
        this.datas[0].list = _.data.data.products;
        this.datas[0].time = _.data.data.limitTime;
        this.$forceUpdate();
      });
    },
    tabSelect({ currentTarget }) {
      this.current = currentTarget.dataset.id;
    },
    onChangeSwiper({ detail }) {
      this.current = detail.current;
    },
    onClickExchange(data) {
      this.currentGoodInfo = data;
      this.showModal = true;
    },
    init() {
      return this.$api.good
        .category()
        .then(_ => {
          this.datas = _.data.data.map(item => {
            item["page"] = 1;
            item["list"] = [];
            // 倒计时
            if (item.id === 3) {
              this.time = item.time ? item.time : 0;
              timer = setInterval(() => {
                this.time--;
                if (this.time <= 0) {
                  clearInterval(timer);
                }
              }, 1000);
            }
            return item;
          });
          return this.datas;
        })
        .then(_ => {
          return this.$api.good.lists(1, size, this.datas[this.current].id).then(response => {
            this.datas[this.current].list = [...this.datas[this.current].list, ...response.data.data.products];

            this.currentGoodInfo = response.data.data.products[0];
            return response;
          });
        });
    }
  },
  destroyed() {
    clearInterval(timer);
  },
  onShow() {
    uni.$emit("shop_onShow");
  },
  onUnload() {
    clearInterval(timer);
  },
  onPullDownRefresh() {
    this.init().then(_ => {
      uni.stopPullDownRefresh();
    });
  },
  onNavigationBarButtonTap(e) {
    if (e.index === 0) {
      // 购买记录
      this.go("/pages/shop/orderRecord/index");
    }
  }
};
</script>

<style lang="scss" scoped>
.shop {
  position: relative;
  height: 100%;
  width: 100%;
  .nav {
    .cu-item {
      height: 70upx;
      line-height: 70upx;
      &.text-green.cur {
        color: #0f86c3;
      }
    }
  }
}

swiper {
  height: calc(100% - 90upx);
  swiper-item {
    .grid {
      &-item {
        padding: 10upx 10upx;
      }
    }
  }
  scroll-view {
    height: 100%;
    &.calcTimeContent {
      height: calc(100% - 90upx);
    }
  }
}
</style>
